<!--
* @Author: Yejing
* @Date: 2023-05-29 17:13:09
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 17:30:02
* @Description: 消费记录
-->
<template>
	<view class="expense-calendar-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" title="消费记录" ></c-navigation-bar>
			<view class="content-box">
				<!-- <slideTab :tabList="['消费','充值','提现']" @change="slideTabChange"></slideTab> -->
				<u-tabs :list="['消费','充值','提现'].map(m=>({name:m}))" :is-scroll="false" :current="activeSidebar"
					@change="tabsChange" :bold="false" active-color="#2934D0">
				</u-tabs>
				<view class="tab-panes">
					<swiper :current="activeSidebar" @change="noticeHandle">
						<swiper-item>
							<scroll-view scroll-y="true">
								<waterfallView>
									<view class="item" v-for="(item, index) in productList" :key="index">
										<productCard :details="item"></productCard>
									</view>
								</waterfallView>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view scroll-y="true">
								<view class="list-withdrawals">
									<view class="list-box" v-for="(item,i) in list.recharg" :key="i">
										<listItem
											:src="require(`@/static/images/user/${item.paymentMethod===0?'bank':'usdt'}.png`)"
											:name="`从${item.paymentMethod===0 ? '银行卡':'USDT'}充值`"
											:time="item.createTime" :money="item.amount">
										</listItem>
										<view :class="`state-icon ${stateClass[item.auditType]}`">
											{{stateList[item.auditType]}}
										</view>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view scroll-y="true">
								<view class="list-withdrawals">
									<view class="list-box" v-for="(item,i) in list.withdrawals" :key="i">
										<listItem
											:src="require(`@/static/images/user/${item.paymentMethod===0?'bank':'usdt'}.png`)"
											:name="`提现到${item.paymentMethod===0 ? '银行卡':'USDT'}`"
											:time="item.createTime" :money="item.amount">
										</listItem>
										<view :class="`state-icon ${stateClass[item.auditType]}`">
											{{stateList[item.auditType]}}
										</view>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeSidebar: 0,
				productList: [{
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '440'
					},
					{
						name: 'Polo Ralph Lauren',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-2.png',
						unit: '$',
						h: '356'
					},
					{
						name: 'Polo Ralph Lauren',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-2.png',
						unit: '$',
						h: '440'
					},
					{
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '440'
					},
					{
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '440'
					},
					{
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '356'
					},
					{
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '356'
					},
					{
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '356'
					}, {
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '356'
					}, {
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '356'
					}, {
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '356'
					}, {
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '356'
					}, {
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-2.png',
						unit: '$',
						h: '440'
					}, {
						name: 'The Cotton Mantil',
						des: 'Here is a brief introduction',
						price: '450',
						img: '../../static/images/home/good-1.png',
						unit: '$',
						h: '356'
					},
				],
				rechargData: {
					"auditType": "",
					"endTime": "2050-05-30 23:59:59",
					"id": "",
					"pageNum": 1,
					"pageSize": 20,
					"paymentMethod": "",
					"source": "",
					"startTime": "2023-04-24 00:00:00",
					"userType": ""
				},
				list: {
					recharg: [], // 充值记录
					withdrawals: [], // 提现记录
				},
				// 审核状态
				stateList: ['待审核', '通过', '不通过'],
				stateClass: ['wait', 'pass', 'unpass'],
			};
		},
		onLoad() {
			this.getRecordForSidebar()
		},
		methods: {
			// 
			tabsChange(val) {
				this.activeSidebar = val
				this.getRecordForSidebar()
			},
			// 
			noticeHandle(data) {
				this.activeSidebar = data.target.current
				this.getRecordForSidebar()
			},
			// 
			getRecordForSidebar() {
				switch (this.activeSidebar) {
					case 1:
						this.getRechargeAjax()
						break;
					case 2:
						this.getWithdrawalsAjax()
						break
					default:
						break;
				}
			},
			// 获取充值记录
			getRechargeAjax() {
				this.$u.post('/app/user/recharge/page', this.rechargData).then(res => {
					this.list.recharg = res.data.records
				})
			},
			// 获取提现记录
			getWithdrawalsAjax() {
				this.$u.post('/app/user/withdrawals/page', this.rechargData).then(res => {
					this.list.withdrawals = res.data.records
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.expense-calendar-container {
		.content-box {
			height: 100vh;
			display: flex;
			flex-direction: column;

			/deep/  .u-tabs {
				.u-tab-bar {}
			}

			.tab-wrap {
				position: static;
			}

			.tab-panes {
				height: 0;
				flex: auto;
				overflow-y: auto;

				uni-swiper {
					height: 100%;
				}

				/deep/  uni-swiper-item {
					overflow: auto !important;
					padding: 0 30rpx;
					box-sizing: border-box;
				}

				.recharge-record {
					padding-top: 40rpx;

					.list-box {
						display: flex;
						padding: 20rpx 0;
						border-bottom: 2rpx solid #ccc;

						.avatar {
							padding-right: 10rpx;
						}

						.content {
							flex: auto;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.list-title {
								font-size: 40rpx;
							}

							.list-des {
								margin-top: 10rpx;
								color: #ccc;
							}

							.list-time {
								font-size: 36rpx;
							}
						}
					}
				}

				.list-withdrawals {
					.list-box {
						position: relative;

						.state-icon {
							position: absolute;
							right: 100rpx;
							top: 50%;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 2rpx solid transparent;
							border-radius: 50%;
							transform: translate(0, -50%) rotate(15deg);
							opacity: 0.7;

							&.wait {
								border-color: #a0cfff;
								color: #2979ff;
							}

							&.pass {
								border-color: #71d5a1;
								color: #19be6b;
							}

							&.unpass {
								border-color: #fab6b6;
								color: #fa3534;
							}
						}
					}

					.user-list-item {
						padding: 20rpx 0;
						position: relative;
						border-bottom: 2rpx solid #ccc;

						/deep/  .avatar {
							align-items: flex-start;

							image {
								width: 50rpx !important;
								height: 50rpx !important;
							}
						}
					}
				}
			}
		}
	}
</style>
